// //获取大盒子对象

// var box=document.querySelector(".box")
// //获取图片的左切换<
// var leftBtn=document.querySelector('.left')
// //获取图片的右切换>
// var rightBtn=document.querySelector(".right")

// var content=document.querySelector(".content")

// var imgul1=document.querySelector('.img-ul1')

// var imgul2=document.querySelector('.img-ul2')

// var contentCont=document.querySelector(".content-cont")

// //获取content-cont中所有选中框对象

// var xuans=document.getElementsByName('xuan')

// //给大盒子对象绑定点击事件

// box.onclick=function(e){

//     //兼容事件对象

//     var e = e || window.event

//     //获取兼容的操作目标

//     var tg= e.target || e.srcElement

//     //判断右边按钮

//     if(tg.className=="arrow right"){

//         //隐藏第一个

//         imgul1.style.display="none"

//         //显示第二个

//         imgul2.style.display='block'
      

//     }

//     //判断左边按钮

//     if(tg.className=="arrow left"){

//         //显示第一个

//         imgul1.style.display='block'
        

//         //隐藏第二个

//         imgul2.style.display='none'

//     }

//     //判断加入购物车

//     if(tg.innerHTML=="加入购物车"){

//         //获取当前tg的父节点

//         var li=tg.parentNode

//         var list=li.children

//         //获取图片地址

//         var url=list[0].getAttribute("src")

//         //标题

//         var title=list[1].innerHTML

//         //价格

//         var price=list[2].innerHTML

//         //创建ul对象

//         var newul=document.createElement('ul')

//         //添加内容

//         newul.innerHTML=`

//         <li>

//             <input type="checkbox" name="xuan">

//         </li>

//         <li>

//             <img src="${url}" alt="">${title}

//         </li>

//         <li>${price}</li>

//         <li>

//             <button>-</button>

//             <input type="text" value="1">

//             <button>+</button>

//         </li>

//         <li>${price}</li>

//         <li>

//             移入收藏

//             删除

//         </li>

//         `

//         //把当前新内容追加到content-cont对象中

//         contentCont.appendChild(newul)

//         total1()

//         total2()

//         fn1()

//     }

//     //全选

//     if(tg.name=="quan"){

//         //遍历所有选中框对象

//         for(let i=0;i<xuans.length;i++){

//             //判断当前全选框是否被选中

//             if(tg.checked){

//                 xuans[i].checked=true

//             }else{

//                 xuans[i].checked=false

//             }

//         }

//         total2()

//     }

//     //批量删除

//     if(tg.innerHTML=="批量删除"){

//         //遍历所有选中框对象

//         for(let i=0;i<xuans.length;i++){

//             //判断当前选中框是否被选中

//             if(xuans[i].checked){

//                 xuans[i].parentNode.parentNode.remove()

//                 i--

//             }

//         }

//         total1()

//         total2()

//         fn1()

//     }

//     //加法

//     if(tg.innerHTML=="+"){

//         //获取数量

//         var num=tg.previousElementSibling.value

//         num++

//         //重新赋值

//         tg.previousElementSibling.value=num

//         //获取当前按钮所对应的商品

//         var ul=tg.parentNode.parentNode

//         //获取当前ul中所有子元素节点

//         var lis=ul.children

//         //获取单价

//         var price1=lis[2].lastElementChild.innerHTML

//         //计算小计

//         var sum=num*price1

//         //重新给小计赋值

//         lis[4].lastElementChild.innerHTML=sum.toFixed(2)

//         total1()

//         total2()

//     }

//     //减法

//     if(tg.innerHTML=="-"){

//         var num=tg.nextElementSibling.value

//         if(num<=1){

//             num=1

//         }else{

//             num--

//         }

//         tg.nextElementSibling.value=num

//         //获取当前按钮所对应的商品

//         var ul=tg.parentNode.parentNode

//         //获取当前ul中所有子元素节点

//         var lis=ul.children

//         //获取单价

//         var price1=lis[2].lastElementChild.innerHTML

//         //计算小计

//         var sum=num*price1

//         //重新给小计赋值

//         lis[4].lastElementChild.innerHTML=sum.toFixed(2)

//         total1()

//         total2()

//     }

//     //删除

//     if(tg.innerHTML=="删除"){

//         tg.parentNode.parentNode.remove()

//         total1()

//         total2()

//         fn1()

//     }

//     //选中框

//     if(tg.name=="xuan"){

//         fn1()

//         total1()

//         total2()

//     }

// }

// function fn1(){

//     var num=0 //表示被选中的次数

//     //遍历选中框对象

//     for(var i=0;i<xuans.length;i++){

//         //判断当前选中框是否被选中

//         if(xuans[i].checked){

//             num++

//         }

//     }

//     //判断当前选中框的长度是否等于被选中的次数

//     if(num==xuans.length){

//         //获取所有全选框对象

//         var quans=document.querySelectorAll('[name="quan"]')

//         quans[0].checked=true

//         quans[1].checked=true

//     }else{

//        //获取所有全选框对象

//        var quans=document.querySelectorAll('[name="quan"]')

//        quans[0].checked=false

//        quans[1].checked=false

//     }

// }

// //店铺合计

// function total1(){

//     var sum=0

//     //获取所有商品

//     var uls=contentCont.getElementsByTagName('ul')

//     //遍历每个商品对象

//     for(var i=0;i<uls.length;i++){

//         //获取当前商品小计

//         var xiaoji=uls[i].children[4].lastElementChild.innerHTML

//         sum+=parseFloat(xiaoji)

//     }

//     //赋值给指定位置

//     var floor=document.querySelector('.content-floor')

//     floor.lastElementChild.innerHTML=sum.toFixed(2)

// }

// //已选商品数量和价格

// function total2(){

//     var m=0 //数量

//     var sum=0 //总价

//     //获取所有商品

//     var uls=contentCont.getElementsByTagName('ul')

//     //遍历每个商品对象

//     for(var i=0;i<uls.length;i++){

//         //判断当前商品是否被选中

//         if(uls[i].children[0].lastElementChild.checked){

//             //获取当前商品小计

//             var xiaoji=uls[i].children[4].lastElementChild.innerHTML

//             sum+=parseFloat(xiaoji)

//             //获取当前商品的数量

//             var mm=uls[i].children[3].children[1].value

//             m+=parseInt(mm)

//         }

//     }

//     //获取存放位置的父节点

//     var tt=document.querySelector('.content-total')

//     //给数量的位置赋值

//     tt.children[2].lastElementChild.innerHTML=m

//     //给总计赋值

//     tt.children[3].firstElementChild.innerHTML=sum.toFixed(2)

// }

// total2()

// total1()












//获取操作对象

var box=document.querySelector('.box')

//获取账号

var name1=getCookie('name')
//定义变量，该账号中所有的数据

var lists


//判断当前账号是否存在

if(name1){

    show1()

}else{

    alert("你还未登录")

    //获取地址栏信息

    var url=location.href

    //跳转到登录页

    location='./login.html?url2='+url

}
function show1(){
    //获取当前账号存储的数据

    lists=localStorage.getItem(name1)||"[]"

    //把字符串转为数组对象

    lists=eval('('+lists+')')

    //判断当前账号是否还有数据

    if(lists.length>0){

        //检查当前数组中所有的is_select字段是否都等于1

        var bool=lists.every(item=>{

        return item.is_select==1

    })

        //创建字符串，拼接所有内容

        //拼接头部

        var str=`
        <div class="content box">   
            <div class="w">
                <ul class="ul1">
                    <li style="width:133px;text-align: top;" >
                        <input type="checkbox" name="quan" ${bool?"checked":""}>全选 
                    </li>
                    <li style="width:470px">商品种类: <span>${lists.length}</span></li>
                    <li style="width:97px">单价</li>
                    <li style="width:127px">数量</li>
                    <li style="width:60px">小计</li>
                    <li>操作</li>
                </ul>
            </div>
    
        </div>

        `

        //遍历数组

        lists.forEach(item=>{

            //拼接商品部分

            str+=`

            <div class="content box">   
            <div class="w">
               
    
            
    
                <div class="content-cont">
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan" data-id="${item.id}" ${item.is_select==1?"checked":""}>
                        </li>
                        <li>
                            <img src="${item.img}" alt="">${item.title1}
                        </li>
                        <li><span>${item.price}</span></li>
                        <li>
                            <button data-id="${item.id}" ${item.cart_number<=1?"disabled":" "}>-</button>
                            <input type="text" value="${item.cart_number}">
                            <button data-id="${item.id}" ${item.cart_number>=item.kuCun_number?"disabled":" "}>+</button>
                        </li>
                        <li>￥<span></span></li>
                        <li>
                            <a href="javascript:;" style="color:#434343;">移入收藏</a>
                           
                            <a href="javascript:;" style="color:#434343;" data-id="${item.id}">删除</a>
                        </li>
                    </ul>
    
                   
                </div>
               
    
                      
            </div>
    
        </div>
       

            `

        })

        //拼接底部

        str+=`
        <div class="content box">   
            <div class="w">

                <div class="content-floor">
                    店铺合计:￥<span>${total3()}</span>
                </div>
                <div class="content-total">
                    <p><input type="checkbox" name="quan" ${bool?"checked":""}>全选</p>
                    <a href="javascript:;">批量删除</a>
                    <p>已选择<span>${total2()[0]}</span>件商品</p>
                    <div>
                        总计(不含运费:)￥<span>${total2()[1]}</span>
                        <button>结算</button>
                    </div>
                </div>
            </div>

        </div>
        `

        //把拼接好的内容渲染到页面中

        box.innerHTML=str

    }else{

        //创建字符串，拼接所有内容

        var str=`
        <div class="content box">   
            <div class="w">
                <div class="jumbotron">

                    <h1>您的购物车空空如也</h1>

                    <h2>点击下方按钮快去选购吧! ^_^</h2>

                    <h3>赶紧去逛逛吧</h3>

                </div>
            </div>

        </div>

        `

        //把拼接好的内容渲染到大盒子中

        box.innerHTML=str

    }

}

//給大盒子对象绑定点击事件

box.onclick=function(e){

    //事件对象兼容

    var e = e || window.event

    //获取操作目标

    var tg=e.target || e.srcElement

    //判断当前点击的是否为加法按钮
    if(tg.innerHTML=="+"){
        //获取当前按钮的id属性
        var id=tg.getAttribute('data-id')
        console.log(lists)
        //遍历数组中所有元素
        lists.forEach(item=>{
            //判断当前遍历的元素id是否等于按钮所对应的id
            if(item.id==id){
                item.cart_number++
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //减法
    if(tg.innerHTML=='-'){
        //获取当前按钮的id
        var id=tg.getAttribute('data-id')
        console.log(id)
        //遍历数组元素
        lists.forEach(item=>{
            //判断当前元素中的id是否等于按钮的id
            if(item.id==id){
                item.cart_number--
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //删除
    if(tg.innerHTML=="删除"){
        //获取当前按钮的id
        var id=tg.getAttribute('data-id')
        //过滤数组元素的id等于当前按钮id
        lists=lists.filter(item=>{
            return item.id!=id
        })
        console.log(lists)
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //全选
    if(tg.name=="quan"){
        //遍历数组中所有商品
        lists.forEach(item=>{
            //判断全选框是否被选中
            if(tg.checked){
                //让商品中的is_select字段为1
                item.is_select=1
            }else{
                item.is_select=0
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //选中框
    if(tg.name=="xuan"){
        //获取当前选中框的id
        var id=tg.getAttribute("data-id")
        //遍历数组元素
        lists.forEach(item=>{
            //判断当前元素的id是否等于选中框的id
            if(item.id==id){
                //判断当前选中框是否被选中
                if(tg.checked){
                    item.is_select=1
                }else{
                    item.is_select=0
                }
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    // 结算
    if(tg.innerHTML=="结算"){
        //给定确认框
        if(confirm("你确定要购买吗？")){
            alert("已支付："+total2()[1])
            //删除已购买的商品
            lists=lists.filter(item=>{
                return item.is_select!=1
            })
            //把操作结果重新存放在localStorage中
            localStorage.setItem(name1,JSON.stringify(lists))
            //重新调用显示数据的函数
            show1()
        }
    }
    // 清空购物车
    if(tg.innerHTML=="批量删除"){
        lists=[]
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }

}

//所选商品数量和价格

function total2(){

    var num1=0 // 所选商品数量

    var num2=0 //所选商品价格
    

    //遍历数组元素

    lists.forEach(item=>{

        //判断当前商品是否被选中

        if(item.is_select==1){

            //累积所有商品数量

            num1+=item.cart_number

            //累积所有选中商品的小计
            
            num2+=item.cart_number*item.price   
            

        }  

    })

    return [num1,num2]

}
function total3(){

    var num3=0 //所选商品价格
    var numnum=0

    //遍历数组元素

    lists.forEach(item=>{

        //判断当前商品是否被选中


            //累积所有商品的小计
            
            num3+=item.cart_number*item.price      

    })

    return [num3]

}





